<template>
  <div class="game-container" ref="gameContainer">
    <div class="ship" ref="ship"></div>
    <div class="bullet" v-for="(bullet, index) in bullets" :key="index" :style="{ left: `${bullet.x}px`, top: `${bullet.y}px` }"></div>
    <div class="monster" v-for="(monster, index) in monsters" :key="index" :style="{ left: `${monster.x}px`, top: `${monster.y}px` }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ship: { x: 250, y: 250, angle: 0 },
      bullets: [],
      monsters: Array.from({ length: 10 }, () => ({ x: Math.random() * 500, y: Math.random() * 500 })),
    };
  },
  mounted() {
    this.$refs.gameContainer.addEventListener('mousemove', this.handleMouseMove);
    this.$refs.gameContainer.addEventListener('click', this.handleMouseClick);
    this.gameLoop();
  },
  methods: {
    handleMouseMove(event) {
      this.ship.x = event.clientX - this.$refs.gameContainer.offsetLeft;
      this.ship.y = event.clientY - this.$refs.gameContainer.offsetTop;
    },
    handleMouseClick() {
      this.bullets.push({ x: this.ship.x, y: this.ship.y });
    },
    gameLoop() {
      this.bullets.forEach(bullet => {
        bullet.y -= 5;
      });
      this.bullets = this.bullets.filter(bullet => bullet.y >= 0);
      this.bullets.forEach((bullet, bulletIndex) => {
        this.monsters.forEach((monster, monsterIndex) => {
          if (Math.abs(bullet.x - monster.x) < 20 && Math.abs(bullet.y - monster.y) < 20) {
            this.bullets.splice(bulletIndex, 1);
            this.monsters.splice(monsterIndex, 1);
          }
        });
      });
      requestAnimationFrame(this.gameLoop);
    },
  },
};
</script>

<style>
.game-container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #eee;
}
.ship {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #f00;
}
.bullet {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #0f0;
}
.monster {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #00f;
}
</style>
